@import "~@/public-style.less";
.workbench-container{
    width: 100%;
    height: 100%;
    .workbench-header{
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid rgba(0,0,0,.2);
        padding-left: 10px;
        padding-right: 50px;
        box-sizing: border-box;
        .left{
            display: flex;
            align-items: center;
            span{
                font-size: 20px;
                color:@White-theme-title-color;
                &.iconfont{
                    width: 18px;
                    height: 18px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    box-sizing: border-box;
                    background-color: @foreground-color;
                    color:@White-theme-title-color;
                    border-radius: 50%;
                    padding: 3px;
                    font-size: 14px;
                    margin-left: 10px;
                    margin-right: 3px;
                    cursor: pointer;
                }
            }
        }
        .right{
            .long{
                cursor: pointer;
                color:rgba(255,255,255,.6);
                margin-right: 10px;
                font-size: 20px;
            }
            .short{
                cursor: pointer;
                color:rgba(255,255,255,.6);
                font-size: 20px;
            }
            .active{
                color:@foreground-color;
            }
        }
    }
    .folder-container{
        height: calc(100% - 110px);
        &>ul{
            display: flex;
            align-content:flex-start;
            flex-wrap: wrap;
            height: 100%;
            overflow-y: scroll;
            &::-webkit-scrollbar{
                width:4px;
                background-color:transparent;
                border-radius: 4px;
              }
            &::-webkit-scrollbar-thumb{
              background-color: #5d5e5f;
              border-radius:4px;
            }
            &>li{
                position: relative;
                height: 65px;
                background-color: rgba(80, 80, 80,.3);
                box-shadow: 0 0 1px rgba(255,255,255,.8);
                box-sizing: border-box;
                border-radius: 8px;
                margin-top: 5px;
                margin-right: 5px;
                padding:5px;
                cursor: pointer;
                transition: all .3s;
                &.long{
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding-right: 60px;
                }
                &:hover{
                    background-color: rgba(180, 180, 180,.4);
                }
                .logo{
                    display: flex;
                    align-items: center;
                    height: 40px;
                    font-size: 20px;
                    color:@White-theme-title-color;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                    .iconfont{
                        font-size: 32px;
                    }
                    .contentEditable{
                        padding-right: 20px;
                        display: flex;
                        &:focus-visible{
                            outline: none;
                        }
                    }
                }
                .time{
                    padding-left: 5px;
                    font-size: 12px;
                    color:@White-theme-title-color;
                }
                .tool{
                    position: absolute;
                    right: 20px;
                    display: none;
                    top:50%;
                    transform: translateY(-50%);
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    cursor: pointer;
                    border:1px solid rgba(200,200,200,.4);
                    align-items: center;
                    justify-content: center;
                }
                &:hover{
                    .tool{
                        display: flex;
                        background-color:@foreground-color ;
                        span{
                            color:rgba(200,200,200,1);
                        }
                    }
                }
            }
        }
    }
    .pagination{
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        .el-pagination{
            // .el-pagination__sizes{
            //     .el-input{
            //        .el-input__inner{
            //             background-color: transparent !important;
            //             border-color:transparent !important;
            //         }
            //     }
            // }
        }
       
    }
}